<template>
    <div class="section_common">
        <!-- 顶部图像 赋能 -->
        <div class="top_img">
            <img
                    src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/04/14/1618394725760.png"
                    alt=""
            /><!-- <img
                    src="http://oa.yswg.com.cn/group1/M00/00/15/rBJDQV_2gLeAJ5Y1AACUIVlKG0o968.png"
                    alt=""
            />-->
        </div>
        <div class="search_area">
            <div class="search_div">
                <van-search
                        v-model="keyword"
                        show-action
                        placeholder="请输入部门/小组名称"
                        @search="searchHandle"
                        @keyup.enter="searchHandle"
                >
                    <template #action>
                        <div @click="searchHandle">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>
        <!--        <van-list-->
        <!--                v-model="loading"-->
        <!--                :finished="finished"-->
        <!--                offset="100"-->
        <!--                finished-text="没有更多了"-->
        <!--                @load="onLoad"-->
        <!--        >-->
        <div class="main">
            <div v-for="(item,index) in this.courseDeptList" :key="index">
                <div class="item"  v-if="!item.traEnabledSee || item.traEnabledSee!=1">
                    <div class="left">
                        <div class="title">{{ item.deptName }}</div>
                        <!--  <div v-if="item.stageSum != null ">共 {{item.stageSum}} 阶段</div>
                          <div class="info">共{{ item.courseCount }}门课程</div>-->
                        <!--                        <div class="controller"  @click="goCourseList(item.deptId)">-->
                        <!--                            <span>查看详情</span>-->
                        <!--                        </div>-->
                        <div class="van-ellipsis">
                            <el-tooltip :content="item.description" placement="top" effect="light"
                                        :disabled="isDisabled">
                                <div class="wordnowrap" :class="{isLink: 'link-text'}" @mouseenter="isShowTooltip"
                                     @click="linkTo">{{item.description}}
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="right">
                        <div class="controller" @click="goCourseList(item.deptId)">
                            <span>查看详情</span>
                        </div>
                        <!--                        <img-->
                        <!--                                src="http://oa.yswg.com.cn:80/group1/M00/00/15/rBJDQV_1dgWANWyYAAASSRLIgQM492.png"-->
                        <!--                                alt=""-->
                        <!--                        />-->
                    </div>
                </div>
            </div>
        </div>
        <!--        </van-list>-->

    </div>
</template>

<script>
    import {Toast} from "vant";

    export default {
        data() {
            return {
                isLink: false,
                isDisabled: false,
                posts: [],
                lessonList: [], //课程列表
                getLessonListUrl: "/mobiles/getCourseList", //获取课程接口
                lessonWareList: [], //课件列表
                getLessonWareListUrl: "/mobiles/getCourseWareList", //获取课件接口
                getCourseDeptListUrl: "/mobiles/getCourseDeptList", //学习路径推荐首页列表
                courseDeptList: [],
                current: 1, //当前页数
                size: 20, //每次加载多少条
                toName: "", //进入页面的名字
                hasUpdate: false, //细节页面是否有更新？
                type: 2, // 2赋能培训
                hadFinishCount: 0, //课程学习进度，区别于课件学习进度
                finished: false,
                loading: false,
                keyword: '',
                userInfo: JSON.parse(localStorage.getItem("userInfo")),
            };
        },
        created() {
            this.getCourseDeptList();
        },
        methods: {
            isShowTooltip(e) {
                let clientWidth = e.target.clientWidth,
                    scrollWidth = e.target.scrollWidth,
                    arrList = Array.from(e.target.classList)
                if (scrollWidth > clientWidth) {
                    this.isDisabled = false
                    if (!arrList.includes('hover-blue')) {
                        e.target.classList.add('hover-blue')
                    }
                } else {
                    this.isDisabled = true
                    e.target.classList.remove('hover-blue')
                }
            },
            linkTo() {
                if (this.isLink) {
                    this.$emit("linkTo")
                }
            },
            //搜索事件
            searchHandle() {
                this.getCourseDeptList();
            },
            // onLoad() {
            //     // 异步更新数据
            //     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            //     setTimeout(() => {
            //         this.getCourseDeptList();
            //     }, 300);
            //     // 数据全部加载完成
            // },
            //学习路径推荐首页列表
            getCourseDeptList() {
                var that = this;
                this.$https
                    .post(this.getCourseDeptListUrl, {
                        deptId: that.userInfo.deptId,
                        userId: that.userInfo.userId,
                        current: that.current,
                        content: that.keyword,
                        type: that.type
                    })
                    .then((res) => {
                        that.courseDeptList = res.data.data;
                        // for (var i = 0; i < 10 && this.courseDeptList.length < res.data.data.total; i++) {
                        //     this.courseDeptList.push(res.data.data.records[i]);
                        // }
                        // console.log(this.courseDeptList)
                        // if (res.data.data.total == 0) {
                        //     this.courseDeptList.length == 0;
                        // }
                        // this.loading = false;
                        // this.current = res.data.data.current + 1;
                        // this.total = res.data.data.total;
                        // if (this.courseDeptList.length >= res.data.data.total) {
                        //     this.finished = true;
                        // }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            goCourseList(deptId) {
                this.$router.push(`/train/study/list/${deptId}/${this.type}`);
            },
            //返回上一页
            onClickLeft() {
                //Toast("返回");
                this.$router.go(-1);
            },
            //查询按钮
            onClickRight() {
                Toast("查询");
            },
        },
    }
</script>

<style lang="scss" scoped>
    .top_img {
        width: 100%;

        img {
            width: 100%;
        }
    }

    .search_area {
        width: 100%;

        .search_div {
            width: 70%;
            margin: 10px auto;
            display: block;
        }

        .search_input {
            width: 90%;
            margin: 10px auto;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 20px;
            border: none;
            border: 1px solid rgba(0, 0, 0, 0.5)
        }
    }

    .main {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;

        .item {
            width: 100%;
            height: 100px;
            background-color: white;
            border-radius: 6px;
            padding: 5px 20px;
            font-size: 12px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 5px;

            .left {
                flex: 1;
                line-height: 40px;
                overflow: hidden;

                & > div {
                    margin-bottom: 4px;
                }

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }

                .el-tooltip__popper {
                    max-width: 500px !important;
                    white-space: pre-wrap !important;
                    word-wrap: break-word !important;
                    word-break: break-all !important;
                }

                /*提示框*/
                .wordnowrap {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .hover-blue:hover {
                    color: blue;
                }

                .link-text {
                    color: blue;
                    cursor: pointer;
                }
            }

            .right {
                .controller {
                    span {
                        padding: 4px 10px;
                        background-color: #fea84f;
                        color: white;
                        border-radius: 10px;
                        cursor: pointer;
                    }
                }


                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    width: 100%;
                }
            }
        }
    }
</style>
